import React, { Component } from 'react';
import {
  Row,
  Col,
  Card,
  List,
  Avatar,
  Button,
  Form,
  Table,
  Popconfirm,
  Divider,
  Modal,
  Slider,
  InputNumber,
  Collapse,
  Icon,
  message,
  Select,
  Timeline,
  Input,
} from 'antd';
import Link from 'umi/link';
import { formatMessage } from 'umi/locale';
import { connect } from 'dva';

import { Stage, Layer, Text, Image, Line, Label, Tag, Rect } from 'react-konva';

@connect(({ ds }) => ({ ds }))
@Form.create()
class IoCheck extends Component {
  constructor(props) {
    super(props);
  }
  state = {
    userId: '',
  };

  render() {
    const Panel = Collapse.Panel;
    const {
      cbjIOStates, // 裁切机的IO状态表
      camIOStates,
    } = this.props.ds;

    const columnsCbjIo = [
      {
        title: <font style={{ color: '#9933cc', fontSize: 16 }}>IO编号</font>,
        dataIndex: 'index',
        key: 'index',
      },
      {
        title: <font style={{ color: '#9933cc', fontSize: 16 }}>功能描述</font>,
        dataIndex: 'info',
        key: 'info',
      },
      {
        title: <font style={{ color: '#9933cc', fontSize: 16 }}>状态</font>,
        dataIndex: 'state',
        key: 'state',
        render: (text, record) => {
          // 根据状态值设置不同的颜色
          if (record.state === 'OFF') {
            return <span style={{ color: 'red', fontSize: 14, fontWeight: 'bold' }}>{text}</span>;
          } else if (record.state === 'ON') {
            return <span style={{ color: '#00EE00', fontSize: 14, fontWeight: 'bold' }}>{text}</span>;
          } else {
            return <span>{text}</span>;
          }
        },
      },
    ];

    const columnsCamIo = [
      {
        title: <font style={{ color: '#9933cc', fontSize: 16 }}>IO编号</font>,
        dataIndex: 'index',
        key: 'index',
      },
      {
        title: <font style={{ color: '#9933cc', fontSize: 16 }}>功能描述</font>,
        dataIndex: 'info',
        key: 'info',
      },
      {
        title: <font style={{ color: '#9933cc', fontSize: 16 }}>状态</font>,
        dataIndex: 'state',
        key: 'state',
        render: (text, record) => {
          // 根据状态值设置不同的颜色
          if (record.state === 'OFF') {
            return <span style={{ color: 'red', fontSize: 14, fontWeight: 'bold' }}>{text}</span>;
          } else if (record.state === 'ON') {
            return <span style={{ color: '#00EE00', fontSize: 14, fontWeight: 'bold' }}>{text}</span>;
          } else {
            return <span>{text}</span>;
          }
        },
      },
    ];

    return (
      <Row style={{ display: 'flex', alignItems: 'stretch' }}>
        <Col span={5}>
          <Card style={{ marginTop: 5, height: '100%' }} title="上料IO状态监控">
            {cbjIOStates.length >= 1 ? (
              <Table pagination={{ pageSize: 12 }} columns={columnsCamIo} dataSource={camIOStates} />
            ) : (
              ''
            )}
          </Card>
        </Col>
        <Col span={5} style={{ marginLeft: 50 }}>
          <Card style={{ marginTop: 5, height: '100%' }} title="裁切机IO状态监控">
            {cbjIOStates.length >= 1 ? (
              <Table pagination={{ pageSize: 12 }} columns={columnsCbjIo} dataSource={cbjIOStates} />
            ) : (
              ''
            )}
          </Card>
        </Col>
      </Row>
    );
  }
}
export default IoCheck;
